import React ,{ useEffect,useState }from 'react'
import { Table, Space, Radio, Switch, Popconfirm, message, Button, Modal, Input, Pagination, Select, Form, Option } from 'antd';

import { httpGetOrders ,httpDelOrders } from '../../api/orders'
 const Order=()=> {
   const { Option } = Select;
   // 数据
   const [data, setData] = useState([]);
   const [pageCode, setPageCode] = useState(1);
   const [pageSize, setPageSize] = useState(4);
   const [total, setTotal] = useState(0);//总页数
  //  搜索的内容
   const [one,setOne]=useState('');
   const [two,setTwo]=useState('');

   const [status, setStatus] = useState('')//状态
   const [value, setValue] = useState('')//搜索

   const columns = [
     {
       title: '序号',
       width: 30,
       dataIndex: 'id',
       key: 'id',
       fixed: 'left',
       render: (_, record, index) => (
         <span>{(pageCode - 1) * pageSize + index + 1}</span>
       ),
     },
     {
       title: '编号',
       width: 60,
       dataIndex: 'number',
       key: 'number',
     },
     {
       title: '姓名',
       width: 60,
       dataIndex: 'name',
       key: 'name',
     },
     {
       title: '手机号',
       width: 50,
       dataIndex: 'tel',
       key: 'tel',
     },
     {
       title: '类型',
       width: 50,
       dataIndex: 'type',
       key: 'type',
     },
     {
       title: '支付金额',
       width: 20,
       dataIndex: 'price',
       key: 'price',
     },
     {
       title: '支付时间',
       width: 80,
       dataIndex: 'payTime',
       key: 'payTime',
     },
     {
       title: '操作',
       key: 'operation',
       fixed: 'right',
       width: 90,
       render: (_, record) => (
         <Space size="middle">
           <Popconfirm title="确定删除吗?" onConfirm={() => handleDelete(record.id)}>
             <a>删除</a>
           </Popconfirm>
         </Space>
       ),
     },
   ];

   useEffect(() => {
     getData()
   }, [pageCode, value, status])

   // 获取经纪人数据
   const getData = async () => {
     const res = await httpGetOrders('/orders', { pageCode, pageSize, value,status});
     setData(res.data.list)
     setTotal(res.data.total)
   }
   // 删除
   const handleDelete = async (id) => {
     console.log(11)
     const res = await httpDelOrders("/delOrders", { id })
     if (res.data.code === 200) {
       message.success(res.data.msg);
       getData()
     } else {
       message.warning(res.data.msg);
     }

   }
   // 下拉框
   const handleChange = (value) => {
    setTwo(value)
   }
   // 搜索
   const Search = () => {
     setValue(one)
     setStatus(two);
    
   }
   // page页码改变
   const onPageChange = (page) => {
     setPageCode(page)
   };
  return (
    <div>
      <div style={{ display: 'flex', marginBottom: '20px' ,marginLeft:'10px'}}>
       
        <Select
          defaultValue="请选择"
          style={{
            width: 230,
            marginRight:'10px'
          }}
          onChange={handleChange}
        >
          {data && data.map((item,index)=>{
            return (
              <Option key={index} value={item.type}>{item.type}</Option>
            )
          })}
          {/* <Option value="离职">离职</Option> */}
        </Select>
        搜索: <Input allowClear onChange={(e) => setOne(e.target.value)} style={{ width: '300px', height: '35px', marginLeft: '10px' }} />
        <Button type="default" onClick={Search}>查询</Button>
      </div>

      <Table
        columns={columns}
        dataSource={data}
        rowKey="id"
        pagination={false}
      />
      {/* 分页 */}
      <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
        <Pagination current={pageCode} total={total} pageSize={pageSize} onChange={onPageChange} />
      </div>

    </div>
  )
}
export default Order;
